<template>
    <div style="background-color: #f4f4f4">

    <div class="p-user-center p-change-pwd" style="min-height:100%;">
        <div class="back-ground">
        </div>
        <div class="page-body">
            <div class="user-profile">
                <div class="avatar">
                    <div class="c-face-img-con c-face-img" style="width: 160px; height: 160px;">
                        <img class="personalImg" :src="imgUrl+user.userImg" alt="" title=""
                             style="border-radius: 50%;">
                    </div>
                </div>
                <div class="user-info">
                    <div class="name-row">
                        <span class="name">{{user.username}}</span>
                        <a target="_self" href="/personalPage" class="user-home-link">
                            个人页面&gt;&gt;
                        </a>
                    </div>
                    <div class="describe">
                        {{user.introduction}}
                    </div>
                    <a title="修改个人资料" href="personalSetting" class="icon-edit">
                        <i class="el-icon-edit"></i>
                    </a>
                </div>
            </div>
            <div id="content-area" class="content-area">
                <div class="left-nav">
                    <a href="/myLikes" :class="{active:shows==1}" class="nav-item" >
                        <i class="fonts icon-favorites-fill"></i>
                        我喜欢的
                    </a>
                    <a href="/personalWorks" :class="{active:shows==2}" class="nav-item">
                        <i class="fonts el-icon-s-management"></i>
                        作品管理
                    </a>
                    <a href="/myDemands" :class="{active:shows==7}" class="nav-item">
                        <i class="fonts el-icon-s-promotion"></i>
                        我的需求
                    </a>
                    <a href="/myOrders" :class="{active:shows==3}" class="nav-item">
                        <i class="fonts el-icon-s-order"></i>
                        我的订单
                    </a>
                    <a href="/myMessage" :class="{active:shows==4}" class="nav-item">
                        <i class="fonts el-icon-message-solid"></i>
                        最新消息
                    </a>
                    <a href="/personalSetting" :class="{active:shows==5}" class="nav-item">
                        <i class="fonts el-icon-s-tools"></i>个人设置
                    </a>
                    <a href="/changePassword" :class="{active:shows==6}" class="nav-item">
                        <i class="fonts el-icon-key"></i>
                        修改密码
                    </a>
                </div>
                
            </div>
            <div>
               
            </div>


        </div>
    </div>
    </div>
</template>

<script setup>
  import {changePwd, selectUser, sendChangePwdCode} from "@/assets/api/userApi";
  import {ElMessage} from "element-plus";
  import {useRouter} from "vue-router";
  import {getCurrentInstance, onBeforeMount, ref} from "vue";

  const router = useRouter();
  const imgUrl = getCurrentInstance()?.appContext.config.globalProperties.$imgUrl
  const user = ref({
    username: "",
    email: "",
    token: "",
    userImg: "/img/userAvatar/defaultUserImg.jpg",
    introduction: "这个人很懒 , 什么也没留下...",
    score: 0,
    password: '',
    code: ''
  });
  const shows = ref(6);
  const timer = ref(null);
  const count = ref(0);
  const showButton = ref(true);
  const rules = ref({
    password: {required: true, message: '请输入新密码', trigger: 'blur'},
    code: {required: true, message: '请输入验证码', trigger: 'blur'}
  });

  const getUserInformation = () => {
    user.userId.value = localStorage.userId;
    selectUser(user).then((res) => {
      user.value = res.data
    })
  };
  const captcha = () => {
    sendChangePwdCode(user).then((res) => {
      if (res.code === 200) {
        countDown();
        ElMessage.success(res.message);
      } else {
        ElMessage.error(res.message);
      }
    })
  };
  const changeMyPassword = () => {
    changePwd(user).then((res) => {
      if (res.code === 200) {
        ElMessage.success(res.message);
        router.replace('/login');
      } else {
        ElMessage.error(res.message);
      }
    })
  };
  //计时器
  const countDown = () => {
    const TimeCount = 60;
    if (!timer.value) {
      showButton.value = false;
      count.value = TimeCount;
      timer.value = setInterval(() => {
        if (count.value > 0 && count.value <= TimeCount) {
          count.value--;
        } else {
          clearInterval(timer.value);
          showButton.value = true;
          timer.value = null;
        }
      }, 1000);
    }
  };

  onBeforeMount(() => {
    router.push({path: this.path});
    getUserInformation();
  });
</script>

<style scoped>

    .p-user-center {
        position: relative;
        padding-top: 70px;
        padding-bottom: 120px;
        background: #f4f4f4;
    }

    .back-ground {
        background-image: url("../../assets/img/personalPageBg.png");
        background-repeat: repeat;
        background-size: 100% 100%;
        position: absolute;
        height: 300px;
        top: 0;
        left: 0;
        right: 0;
        z-index: 0;
    }

    .page-body {
        width: 1200px;
        margin: 0 auto;
        z-index: 1;
        position: relative;
    }

    .user-profile {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        min-height: 160px;
    }

    .personalImg {
        height: 160px;
        width: 160px;
    }

    .avatar {
        height: 160px;
        width: 160px;
    }

    .c-face-img-con {
        display: inline-block;
        position: relative;
    }

    .user-info {
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        margin-left: 40px;
    }

    .name-row {
        height: 40px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .name {
        font-size: 30px;
        color: #fff;
    }

    .user-home-link {
        margin-left: 20px;
        font-size: 18px;
        font-weight: 600;
    }

    .describe {
        height: 28px;
        font-size: 16px;
        color: #aaa;
        line-height: 21px;
        margin-top: 16px;
        word-break: break-all;
    }

    .icon-edit {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        border-radius: 50%;
        color: #000;
        background: #fff;
        width: 50px;
        height: 50px;
        margin-top: 26px;
        font-size: 20px;
        text-decoration: none;
    }

    .user-home-link {
        margin-left: 20px;
        font-size: 18px;
        font-weight: 600;
        color: #adb3fb;
        text-decoration: none;
    }

    .left-nav {
        margin-top: 100px;
        width: 223px;
        background: #fff;
        border-radius: 4px;
        padding: 20px;
        float: left;
        height: 700px;
    }

    .nav-item:not(:first-of-type) {
        margin-top: 20px;
    }

    .nav-item {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        color: #2f2f2f;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        position: relative;
        text-decoration: none;
    }

    .fonts {
        font-size: 24px;
        margin-right: 10px;
    }

    .active {
        color: #adb3fb;
    }

    .content-header {
        width: 80%;
        height: 57px;
        background: #fff;
        border-radius: 4px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 0 20px 0 16px;
        font-size: 18px;
        font-weight: 600;
        color: #2f2f2f;
        float: right;
        margin-top: 100px;
    }

    .header-toolbar {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        width: 100%;
    }

    .content-body {
        padding: 52px 39px 40px;
        background: #fff;
        border-radius: 4px;
        margin-top: 182px;
        width: 80%;
        max-width: 1199px;
        margin-left: 242px;
        height: 619px;
    }

    .form-tag {
        background-color: #ffffff;
        float: left;
        color: #222222;
        border: #ffffff;
        font-size: 14px;
    }
    .input-item{
        width: 600px;
    }
    .form-code{
        margin-top: 70px;
        margin-left: -61px;
    }
    .code-item{
        margin-top: 20px;
        margin-left: -18px;
    }

    .save{
        margin-top: 20px;
    }
    .container {
        width: 1200px;
        margin: 0 auto;
    }
    p {
        display: block;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    }

    .position {
        text-decoration: none;
        color: #222222;
    }

    .position:hover {
        color: #adb3fb;
    }
</style>
